<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="用户名" prop="userName" width='150'></el-table-column>
			<el-table-column label="昵称" prop="nickName" width='150'></el-table-column>
			<el-table-column label="密码" prop="password" width='570'></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="success" round @click="updateUser(scope.$index)">编辑</el-button>
					<el-button type="primary" round  @click="uPwd(scope.row)">修改密码</el-button>
					<el-button type="danger" round @click="delUser(scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"
		 :current-page="currentPage" class='fen'>
		</el-pagination>

		<el-dialog title="修改用户信息" :visible.sync="dialogVisible" width="50%">
			<!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="用户名">
					<el-input v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item label="昵称">
					<el-input v-model="form.nickName"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<el-input v-model="form.avatar"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateUsers()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
		  title="请输入新密码"
		  :visible.sync="dialogPwd"
		  width="50%">
		  <el-input v-model="pwdipt" placeholder="请输入新密码"></el-input>
		    <span slot="footer" class="dialog-footer">
		        <el-button type="primary" @click="dialogVisible=false,updatePwd()">确 定</el-button>
		      </span>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import * as api from '../api/User'
	export default {
		name: 'usercao',
		data() {
			return {
				tableData: [],
				currentPage: 1,
				totalCount: 50,
				tab_id: '',
				dialogVisible: false,
				dialogPwd:false,
				input: '',
				form: {
					userName: '',
					nickName: '',
					avatar: ''
				},
				pwdipt:''
			}
		},
		methods: {
			uPwd(row){
				this.dialogPwd = true;
				this._id = row._id
			},
			updatePwd(){
				api.updateUserPwd(this._id,{
					password:this.pwdipt
				}).then(res=>{
					this.dialogPwd = false;
					this.pwdipt=''
				})
			},
			// 点击修改获取当前弹框的信息
			updateUser(scope) {
				this.tab_id = this.tableData[scope]._id
				this.form = this.tableData[scope]
				this.dialogVisible = true
			},
			// 修改用户
			updateUsers() {
				api.updateUser(this.tab_id, {
					userName: this.form.userName,
					nickName: this.form.nickName,
					avatar: this.form.avatar
				}).then(res => {
					this.dialogVisible = false
				})
				
			},
			// 删除用户
			delUser(scope) {
				this.tab_id = this.tableData[scope]._id
				api.delUser(this.tab_id).then(res => {
					this.$router.go(0)
				})
			},
			// 分页器页码
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				api.userlists({
					per:6,
					page: this.currentPage
				}).then(res => {
					this.tableData = res.data.users;
				})
			},
		},
		mounted() {
			api.userlists({
				per:6
			}).then((res) => {
				this.totalCount = res.data.totalCount
				this.tableData = res.data.users
			})
		}
	}
</script>

<style scoped="">
	.fen{
		position: absolute;
		left: 40%;
		bottom: 10px;
	}
</style>
